<template>
  <div id="app">
    <!--页头-->
    <div class="line"></div>
    <el-menu
      :default-active="activeIndex2"
      class="el-menu-demo"
      mode="horizontal"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b">
      <el-menu-item index="1" style="margin-left: 1450px;" >处理中心</el-menu-item>
      <el-submenu index="2">
        <template slot="title">我的工作台</template>
        <el-menu-item index="2-1">选项1</el-menu-item>
        <el-menu-item index="2-2">选项2</el-menu-item>
        <el-menu-item index="2-3">选项3</el-menu-item>
        <el-submenu index="2-4">
          <template slot="title">选项4</template>
          <el-menu-item index="2-4-1">选项1</el-menu-item>
          <el-menu-item index="2-4-2">选项2</el-menu-item>
          <el-menu-item index="2-4-3">选项3</el-menu-item>
        </el-submenu>
      </el-submenu>
      <el-menu-item index="3" disabled>消息中心</el-menu-item>
      <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
    </el-menu>
    <!--下拉导航栏-->
    <el-container style="height: 870px; border: 1px solid #eee">
      <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
        <el-menu :default-openeds="['1', '3']">
          <el-menu-item @click="getURL('http://localhost:8000/#/Show')">嘉云健康系统</el-menu-item>
          <el-submenu index="1">
            <template slot="title"><i class="el-icon-message"></i>会员管理</template>
            <el-menu-item-group>
              <el-menu-item index="1-1" @click="getURL('http://localhost:8000/#/MemberInfo')">会员信息</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title"><i class="el-icon-menu"></i>预约管理</template>
            <el-menu-item-group>
              <el-menu-item index="2-1" @click="getURL('http://localhost:8000/#/Subscribe')">预约列表</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title"><i class="el-icon-setting"></i>健康评估</template>
            <el-menu-item-group>
              <el-menu-item index="3-1">评估列表</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="4">
            <template slot="title"><i class="el-icon-setting"></i>健康干预</template>
            <el-menu-item-group>
              <el-menu-item index="4-1">随访日志</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="5">
            <template slot="title"><i class="el-icon-setting"></i>统计分析</template>
            <el-menu-item-group>
              <el-menu-item index="5-1">工作量统计</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-aside>
      <iframe :src="src" class="act-form" id="point"></iframe>
    </el-container>

  </div>
</template>
<script>
  export default {
    data() {
      return {
        /*Iframe默认路径*/
        src: 'http://localhost:8000/#/show'
      }
    },methods:{
      /*动态Iframe SRC*/
      getURL(point){
        this.src=point;
      }
    }
  };
</script>
<style scoped>
  /*CSS*/
  .el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
  }

  .el-aside {
    color: #333;
  }

  .act-form{height: 870px;width: 1800px;border: 1px}
</style>

